<template>
  <div class="aa">
    <!-- 上面部分 -->
    <h4>线路管理</h4>
    <el-card style="margin:20px">
      <el-form label-width="120px" :model="form">

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="线路编号：" prop="number">
              <el-input v-model="form.number" placeholder="请输入线路编号" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="线路名称：" prop="name">
              <el-input v-model="form.name" placeholder="请输入线路名称" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="起始机构：" prop="startAgency">
              <el-select
                v-model="form.startAgency"
                placeholder="请选择起始地机构"
                clearable
              >
                <el-option hidden :value="options.id" :label="options.name" />
                <el-tree accordion :data="options" :props="{label:'name'}" @node-click="deptSelect" />

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="目的地机构" prop="endAgency">

              <el-select
                v-model="form.endAgency"
                placeholder="请选择起始地机构"
                clearable
              >
                <el-option hidden :value="options.id" :label="options.name" />
                <el-tree accordion :data="options" :props="{label:'name'}" @node-click="deptSelect1" />

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="danger" style="margin-left:20px" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 下面部分 -->
    <el-card style="margin:20px">
      <el-button type="danger" @click="isShowDialog = true">新增线路</el-button>
      <el-button type="danger">成本设置</el-button>

      <!-- 弹框 -->
      <add-dialog
        :is-show-dialog="isShowDialog"
        @closeDialog="isShowDialog=false"
      />

      <el-table style="width:100%;margin-top:30px" :data="list">
        <el-table-column type="expand">
          <el-table :data="table" style="magin-left:30px">
            <el-table-column label="车次名称" prop="name" />
            <el-table-column label="发车频次" />
            <el-table-column label="线路类型" />
            <el-table-column label="车辆安排" />
            <el-table-column label="司机安排" />
            <el-table-column label="操作" width="300">
              <div style="display:flex">
                <el-button type="text">编辑车次</el-button>
                <el-button type="text" style="color:red">删除车次</el-button>
                <el-button type="text">安排车辆</el-button>
                <el-button type="text" style="color:red">车辆解绑 </el-button>
              </div>
            </el-table-column>
          </el-table>
        </el-table-column>
        <el-table-column
          label="线路编号"
          prop="number"
        />
        <el-table-column
          label="线路名称"
          prop="name"
        />
        <el-table-column
          label="线路类型"
          prop="type"
          :formatter="formatScheduling"
        />
        <el-table-column
          label="起始地机构"
          prop="startOrganName"
        />
        <el-table-column
          label="目的地机构"
          prop="endOrganName"
        />
        <el-table-column
          label="距离（千米）"
          prop="distance"
        />
        <el-table-column
          label="成本（元）"
          prop="cost"
        />
        <el-table-column
          label="预计分钟"
          prop="time"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="200"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="edit(row.id)">修改 </el-button>
            <el-button type="text" size="small" style="color:red" @click="del(row.id)">删除</el-button>
            <el-button type="text" size="small">增加车次</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <img src="./kong.png" alt="">
          <div>没有找到您要的内容哦~</div>
        </template>

      </el-table>

      <!-- 修改组件 -->
      <editDialog
        ref="bbb"
        :is-edit-dialog="isEditDialog"
        @close="isEditDialog = false"
      />
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">

        <el-pagination
          :page-sizes="[10, 20, 30, 40, 50, 60, 70]"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="form.pageSize"
          :total="form.total"
          @size-change="currentChange"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 树形接口
import { getTree } from '@/api/modules/scheduling/transportationTask'
// 引入枚举数据
import schedulingNum from '@/constant/scheduling'
// 新增弹框组件
import addDialog from './components/addDialog.vue'
// 编辑弹框组件
import editDialog from './components/editDialog.vue'
// api接口
import { getTransportLine } from '@/api/modules/scheduling/transportationTask'
import { getTransportLineTrips, deleteLine, getOneLine } from '@/api/line'
export default {
  components: { addDialog, editDialog },
  data() {
    return {
      // 默认弹框不显示
      isShowDialog: false,
      isEditDialog: false,
      list: [],
      number: '',
      lineName: '',
      original: '',
      address: '',
      options: [],
      value: '',
      form: {
        id: '',
        status: '',
        loadingStatus: '',
        licensePlate: '',
        startAgency: '',
        endAgency: '',
        assignedStatus: '',
        lanDepartureTime: '',
        actualDepartureTime: '',
        updated: '',
        page: 1,
        pageSize: 10,
        planArrivalTime: '',
        startAgencyId: '',
        truckId: '',
        endAgencyId: '',
        total: 0

      },
      table: [],
      formData: ''
    }
  },
  async created() {
    // 页面加载数据
    this.loadPage()
    // 下拉数据
    const res = await getTransportLineTrips(this.form.id)
    console.log('下拉列表数据', res.data)
    this.table = res.data
    // 树形
    const res1 = await getTree()
    // console.log(JSON.parse(res1.data))
    this.options = JSON.parse(res1.data)
  },
  methods: {
    // 部门选中后的操作
    deptSelect(data) {
      console.log(data)
      // 赋值
      this.form.startAgency = data.name
      // 关闭弹窗
      this.isShowTree = false
    },
    deptSelect1(data) {
      // 赋值
      this.form.endAgency = data.name
      // 关闭弹窗
      this.isShowTree1 = false
    },
    // 页面加载数据
    async loadPage() {
      const res = await getTransportLine(this.form)
      // console.log(11111111, res)
      console.log(res.data)
      this.list = res.data.items
      const { page, pageSize, counts } = res.data
      this.form.total = Number(counts)
      this.form.page = page
      this.form.pageSize = pageSize
    },
    // 页面切换功能
    currentChange(newPage) {
      this.form.page = newPage
      this.loadPage()
    },
    // 通过枚举数据格式化 线路类型格式
    formatScheduling(row, column, val, index) {
      const res = schedulingNum.type.find(v => v.id === val)
      return res ? res.value : '未知'
    },
    // 编辑按钮
    async edit(id) {
      // 打开编辑弹框
      this.isEditDialog = true
      // 根据id回显数据
      const res = await getOneLine(id)
      // 将接口返回的数据赋值给编辑表单
      this.$refs.bbb.form = res.data
    },
    // 表单删除按钮
    async del(id) {
      console.log(id)
      await this.$confirm('你确定要删除吗')
      await deleteLine(id)

      this.$message.success('删除成功')
      this.loadPage()
    },
    // 搜索按钮
    async search() {
      console.log(this.form)
      const selected = {}
      // selected.page = this.form.page
      // selected.pageSize = this.form.page
      const res = await getTransportLine({ ...selected, page: selected.page, pageSize: selected.pageSize })
      console.log('31212', res)
      this.list = res.data.items
      this.loadPage()
    },
    // 重置按钮
    reset() {
      this.form = ''
    }
  }
}
</script>

<style  scoped>

</style>

<style lang="sass">

</style>
